{% extends 'basic_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <style>
        #ins_leftName ,#ins_rightName,#sms_contact_leftName ,#sms_contact_rightName,#email_contact_leftName ,#email_contact_rightName{
            float: left;
            width: 350px;
            height: 200px;
        }
        #btn{
            float: left;
            width: 100px;
            height: 200px;
        }
        #ins_toRight,#ins_toLeft,#sms_contact_toRight,#sms_contact_toLeft,#email_contact_toRight,#email_contact_toLeft{
            margin-top:50px ;
            margin-left:30px;
            width: 50px;
        }
        .border{
            height: 200px;
            padding: 0px;
        }
    </style>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="page-header">添加sql类监控任务</h2>
        <form class="form-horizontal" action="{{ request.path }}" method="post" >
            <div class="form-group">
                <label class="col-sm-2 control-label">name：</label>
                <div class="col-sm-10">
                    <input type="text" style="width:300px;" class="form-control" name="add_name" placeholder="名称">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">task：</label>
                <div class="col-sm-3">
                    <select  class="form-control" name="add_tash_info" id="add_tash_info">
                        <option>--</option>
                        {% for i in task_info %}
                            <option>{{ i.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">desc：</label>
                <div class="col-sm-3">
                    <input type="text" style="width:300px;" class="form-control" name="add_desc" placeholder="描述">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">task_type：</label>
                <div class="col-sm-3">
                    <input type="text" style="width:300px;" class="form-control" name="add_task_type"  value="sql类任务" readonly="readonly">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">crontab_time：</label>
                <div class="col-sm-3">
                    <select  class="form-control" name="add_task_time">
                        <option>--</option>
                        {% for i in task_time %}
                            <option>{{ i.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group" id="label_arg_1">
                <label class="col-sm-2 control-label">监控项：</label>
                <div class="col-sm-3">
                    <select  class="form-control" name="add_task_point">
                        <option>--</option>
                        {% for i in task_point %}
                            <option>{{ i.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group" id="limit_status_div">
                <label class="col-sm-2 control-label" >是否有阀值：</label>
                <div class="col-sm-3">
                    <select  class="form-control" id="limit_status" name="add_limit_status">
                        <option>否</option>
                        <option>是</option>
                    </select>
                </div>
            </div>
            <div class="form-group" >
                <label class="col-sm-4 control-label">未添加的实例信息</label>
                <label class="col-sm-5 control-label">已添加的实例信息</label></div>
            <div class="form-group">
                <div class="form-group">
                    <div class="border">
                        <label class="col-sm-2 control-label" >请选择实例：</label>
                        <select id="ins_leftName" multiple="multiple">
                            {% for i in ins_info %}
                                <option>{{ i.dbname }}__{{ i.conn_string }}</option>
                            {% endfor %}
                        </select>
                        <div id="btn">
                            <input type="button" id="ins_toRight" value="-->"><br>
                            <input type="button" id="ins_toLeft" value="<--">
                        </div>
                        <select id="ins_rightName" multiple="multiple" name="add_ins">
                        </select>
                    </div>
                </div>
                <div class="form-group" id="sms_status_div">
                    <label class="col-sm-2 control-label" >是否发短信：</label>
                    <div class="col-sm-3">
                        <select  class="form-control" id="sms_status" name="add_sms_status">
                            <option>否</option>
                            <option>是</option>
                        </select>
                    </div>
                </div>

                <div class="form-group" >
                    <label class="col-sm-4 control-label">未添加的用户信息</label>
                    <label class="col-sm-5 control-label">已添加的用户信息</label></div>
                <div class="form-group">
                    <div class="form-group">
                        <div class="border">
                            <label class="col-sm-2 control-label" >请选择短信联系人：</label>
                            <select id="sms_contact_leftName" multiple="multiple">
                                {% for i in user_info %}
                                    <option>{{ i.username }}__{{ i.iphone }}</option>
                                {% endfor %}
                            </select>
                            <div id="btn">
                                <input type="button" id="sms_contact_toRight" value="-->"><br>
                                <input type="button" id="sms_contact_toLeft" value="<--">
                            </div>
                            <select id="sms_contact_rightName" multiple="multiple" name="add_sms_contact">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">短信内容：</label>
                        <div class="col-sm-3">
                            <input type="text" style="width:300px;" class="form-control" readonly="readonly"  id="sms_conent" name="add_sms_conent" placeholder="短信内容为sql执行结果">
                        </div>
                    </div>
                    <div class="form-group" id="mail_status_div">
                        <label class="col-sm-2 control-label" >是否发邮件：</label>
                        <div class="col-sm-3">
                            <select  class="form-control" id="mail_status" name="add_mail_status">
                                <option>否</option>
                                <option>是</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-sm-4 control-label">未添加的用户信息</label>
                        <label class="col-sm-5 control-label">已添加的用户信息</label></div>
                    <div class="form-group">
                        <div class="form-group">
                            <div class="border">
                                <label class="col-sm-2 control-label" >请选择邮件联系人：</label>
                                <select id="email_contact_leftName" multiple="multiple">
                                    {% for i in user_info %}
                                        <option>{{ i.username }}__{{ i.email }}</option>
                                    {% endfor %}
                                </select>
                                <div id="btn">
                                    <input type="button" id="email_contact_toRight" value="-->"><br>
                                    <input type="button" id="email_contact_toLeft" value="<--">
                                </div>
                                <select id="email_contact_rightName" multiple="multiple" name="add_email_contact">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮件内容：</label>
                            <div class="col-sm-3">
                                <input type="text" style="width:300px;" class="form-control" name="add_email_conent" placeholder="邮件内容">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" >是否启用：</label>
                            <div class="col-sm-3">
                                <select  class="form-control" id="enabled" name="add_enable">
                                    <option>是</option>
                                    <option>否</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注：</label>
                            <div class="col-sm-10">
                                <input type="text" style="width:300px;" class="form-control" name="add_remake" placeholder="备注">
                            </div>
                        </div>
                        <div class="col-sm-10">
                            {#                <button type="submit" class="btn ">提交</button>#}
                            <div style="text-align:center;vertical-align:middle;">
                                <input type="button" style="text-align:center;" class="btn"  id="all_select" value="全标记">
                                <input type="submit" style="text-align:center;" class="btn" value="提交"></div>
                            <div style="text-align:center;vertical-align:middle;">
                                提交前记得点"全标记",默认提交的是鼠标选中的信息
                            </div>
                        </div>
        </form>
    </div>
{% endblock %}
{% block script %}
    <script>

        //是否有阀值
        $('#limit_status').change(function () {
            var limit_status_val = $('#limit_status').find("option:checked").val()
            if ( limit_status_val == '是' ) {
                $('#limit').remove()
                $('#limit_unit').remove()
                $('#sms_conent').prop("readonly", true)
                $('#limit_status_div').after("<div class='form-group' id='limit_unit'>\n" +
                    "                <label class=\"col-sm-2 control-label\" >阀值单位：</label>\n" +
                    "                <div class=\"col-sm-3\">\n" +
                    "                    <select  class=\"form-control\"  name=\"add_limit_unit\">\n" +
                    "                        <option>--</option>\n" +
                    "                        <option>%</option>\n" +
                    "                        <option>s</option>\n" +
                    "                        <option>min</option>\n" +
                    "                        <option>条</option>\n" +
                    "                        <option>个</option>\n" +
                    "                    </select>\n" +
                    "                </div>\n" +
                    "            </div>")
                $('#limit_status_div').after(" <div class='form-group' id='limit'> <label class=\"col-sm-2 control-label\">阀值：</label><div class=\"col-sm-10\"><input type=\"text\" style=\"width:300px;\" class=\"form-control\" name=\"add_limit\" placeholder=\"阈值\"></div><div>")



            }
            else {
                $('#sms_conent').prop("readonly", false)
                $('#limit').remove()
                $('#limit_unit').remove()
            }
        })
        //是否发短信

        //是否发邮件

        //实现下拉框中内容左右选择
        $(function () {
            //实例信息
            $("#ins_toRight").click(function () {
                $("#ins_rightName").append($("#ins_leftName > option:selected"));
            });
            $("#ins_toLeft").click(function () {
                $("#ins_leftName").append($("#ins_rightName > option:selected"));
            });


            //短信联系人信息
            $("#sms_contact_toRight").click(function () {
                $("#sms_contact_rightName").append($("#sms_contact_leftName > option:selected"));
            });
            $("#sms_contact_toLeft").click(function () {
                $("#sms_contact_leftName").append($("#sms_contact_rightName > option:selected"));
            });

            //邮件联系人信息
            $("#email_contact_toRight").click(function () {
                $("#email_contact_rightName").append($("#email_contact_leftName > option:selected"));
            });
            $("#email_contact_toLeft").click(function () {
                $("#email_contact_leftName").append($("#email_contact_rightName > option:selected"));
            });

            //右侧侧全选
            $("#all_select").click(function () {
                $("#ins_rightName option").prop("selected", "selected")
                $("#sms_contact_rightName option").prop("selected", "selected")
                $("#email_contact_rightName option").prop("selected", "selected")
            });
        })
    </script>
{% endblock %}